<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="../js/echarts.min.js"></script>
</head>
<body background="../image/4.jpeg" style=" background-repeat:no-repeat ;background-size:100% 100%;
			background-attachment: fixed;opacity=0.4" >
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
       //准备数据
      var sales_amount={"按摩椅":"283200","跑步机":"1476200","微波炉":"247000","显示器":"1684500",'液晶电视':'3085000'};
      


        // 指定图表的配置项和数据
        var option = {
        	title:{
        		text:'商品销售额',
        		subtext:'',
        		x:'center',
        		textStyle:{color:'white'}
        	},
        	//鼠标触发提示
        	tooltip:{
        		trigger:'item',
        		confine:'True',
        		formatter:"{a}<br/>{b}:{c}({d}%)"
        	},
        	//图列
        	legend:{
        		orient:"horizontal",
        		x:"center",
        		top:"12%",
        		textStyle:{color:"white",fontsize:'10'},
        		data:['按摩椅','跑步机','微波炉','显示器','液晶电视'],
        		itemWidth:15,itemHeigth:8,
        	},
        	calculable:true,
        	series:[
        	{
        		name:'访问来源',
        		type:'pie',
        		radius:'50%',
        		center:['50%','60%'],
        		data:[
        		{value:283200,name:'按摩椅'},
        		{value:1476200,name:'跑步机'},
        		{value:247000,name:'微波炉'},
        		{value:1684500,name:'显示器'},
        		{value:3085000,name:'液晶电视'},
        		],
        		itemStyle:{
        			normal:{
        				shadowBlur:200,
        				shadowColor:'rgba(255,0,0,0.5)',
        				label:{
        					show:true,
        					color:'white',
        					formatter:'({d}%)\n{b}:{c}'
        				},
        				labelLine:{show:true}
        			}
        		}
        	}]
        
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>